<template>
  <el-dialog title="角色菜单权限" :visible.sync="permMap.menuTreeShow" @close="menuDialogClosed" @open="menuDialogOpen" width="80%">
      <el-container class="perm-container">
        <el-main class="perm-main">
          <el-card class="box-card">
            <div slot="header">
              <div class="title-box" style="padding-top: 10px; padding-bottom: 13px;">
                <span>菜单权限树</span>
              </div>
            </div>
            <el-input class="mgb-15" :placeholder="filterPlaceholderText" v-model="filterOrgText"></el-input>
            <div style="margin-bottom: 20px;"></div>
            <el-checkbox v-model="checkedAll" @change="toggleTree">全选</el-checkbox>
            <div style="margin-bottom: 10px" />
            <el-tree ref="PermTreeRef" v-loading="viewload" :filter-node-method="filterNode" :data="menuPermTree"
                     :props="treeProps" node-key="id" default-expand-all  show-checkbox  @check="treeCheck" >
              <span class="custom-tree-node" slot-scope="{ node, data }">
                  <span>
                    <span class="mgl-10" v-if="data.type==menuType.MENU"><span class="menu-title">{{ data.name }}</span><span style="margin: 5px" /><el-tag class="mgl-10" type="info" size="mini">一级菜单</el-tag></span>
                    <span class="mgl-10" v-else-if="data.type==menuType.ITEM"><span class="item-title">{{ data.name }}</span><span style="margin: 5px" /><el-tag class="mgl-10" type="info" size="mini">子菜单</el-tag></span>
                    <span class="mgl-10" v-else-if="data.type==menuType.BUTTON"><span class="button-title">{{ data.name }}</span><span style="margin: 5px" /><el-tag class="mgl-10" type="info" size="mini">按钮</el-tag></span>
                  </span>
              </span>
            </el-tree>
          </el-card>
        </el-main>
      </el-container>
      <div slot="footer" class="dialog-footer">
        <el-button @click="permMap.menuTreeShow = false">取消</el-button>
        <el-button type="primary" @click="checkUpdateMenuPerm">确定</el-button>
      </div>
    </el-dialog>
</template>

<script>
  import roleApi from '@/api/role'
  import {menuType} from '@/utils/constants'
  import debounce from 'lodash/debounce'
  export default {
    name: 'menuPerm',
    props:{
      permMap:{
        type:Object,
        required:true
      }
    },
    data(){
      return {
        viewload:false,
        filterPlaceholderText: '输入权限名称搜索',
        filterOrgText:'',
        menuPermTree:[],
        allPermKeys:[],
        checkedKeys:[],
        checkedAll:false,
        menuType,
        treeProps:{
          label:'name',
          children:'children'
        }

      }
    },
    watch: {
      'filterOrgText': debounce(function (val) {
        this.$refs.PermTreeRef.filter(val);
      }, 600),
    },//watch
    methods:{
      filterNode(value, data) {
        if (!value) return true;
        return data.name.indexOf(value) !== -1;
      },
      menuDialogOpen(){
        this.viewload=true
        roleApi.findRolePerms(this.permMap.roleId).then(res=>{
          this.menuPermTree = res.data.permissions
          let myPerms = res.data.myPermissions
          this.allPermKeys = this.allPermTreeIds(res.data.permissions)
          this.checkedKeys = myPerms.map(perm=>perm.id)
          if (this.allPermKeys.sort().toString()===this.checkedKeys.sort().toString())
              this.checkedAll=true
          setTimeout(()=>{
            this.checkedKeys.forEach(value=>{
              this.$refs.PermTreeRef.setChecked(value, true, false)
            })
            this.viewload=false
          },100)

        })
      },
      allPermTreeIds(permTree){
        let ids =[]
        permTree.forEach(perm=>{
          ids.push(perm.id)
          if (perm.children.length){
            let cids = this.allPermTreeIds(perm.children)
            if (cids.length)
              ids.push(...cids)
          }
        })
        return ids
      },
      toggleTree(){
        const allMenu = this.menuPermTree.map(perm=>perm.id)
        if (this.checkedAll)
          this.checkedKeys=allMenu
        else
          this.checkedKeys=[]
        setTimeout(()=>{
          allMenu.forEach(value=>{
            this.$refs.PermTreeRef.setChecked(value, this.checkedAll, true)
          })
          this.viewload=false
        },100)

      },
      treeCheck(){
        this.checkedKeys = this.$refs.PermTreeRef.getCheckedKeys()
        this.checkedAll = this.allPermKeys.sort().toString() === this.checkedKeys.sort().toString();
      },
      checkUpdateMenuPerm(){
        this.checkedKeys = this.$refs.PermTreeRef.getCheckedKeys()
        let perms = this.checkedKeys.join(',')
        roleApi.storeMenuPerms(this.permMap.roleId, perms).then(res=>{
          this.permMap.menuTreeShow=false
          this.$message.success('设置菜单权限成功')
        })

      },
      menuDialogClosed(){
        this.checkedAll=false
        this.allPermKeys=[]
        this.checkedKeys.forEach(value=>{
          this.$refs.PermTreeRef.setChecked(value, false, false)
        })

      }
    }
  }
</script>

<style scoped lang="scss">
   @import 'src/styles/variables.scss';
  .perm-container{
    height: 600px;
  }
  .menu-title{
    font-weight: normal;
    color:$tenant-color;
  }
  .item-title{
    font-weight: lighter;
    color: $company-color;
    font-size: small;
  }
  .button-title{
    font-weight: lighter;
    color: $organize-color;
    font-size: small;
  }
  .box-card {
    width: 100%;
  }
  .perm-aside{
    width: 40%;
    display: flex;
    align-items: flex-start;
    justify-content: center;
  }
  .perm-main{
    display: flex;
    width: 100%;
    align-items: flex-start;
    justify-content: center;
  }
  .title-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    span {
      font-size: 22px;
    }
  }
  .custom-tree-node {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    padding-right: 8px;
  }
</style>
